<template>
  <div class="map">
    <div id="map_box" class="map_box" :style="{ height: (fullHeight-114) + 'px' }">
      <div class="alarmArea" v-show="alarmArea" :style="{left:aleft+'px',top:atop+'px'}">
        <img :src="yuanquan" />
      </div>
    </div>
    <div class="search">
      <div class="search_item" v-show="nameSeach">
        <el-autocomplete v-model="fireHydantName" :fetch-suggestions="querySearch" placeholder="请输入消防栓名称" :trigger-on-focus="false" @select="handleSelect" size="small">
          <i class="el-icon-search" slot="suffix" @click="handleNameClick">
          </i>
        </el-autocomplete>
        <el-button type="primary" size="mini" @click="toNearStatu" style="text-align:center;">附近消防栓</el-button>
      </div>
      <div class="near_item" v-show="searchBox">
        <img class="back" :src="back" @click="backClick" />
        <el-input placeholder="请输入地址" size="small" id="addresSeach" v-model="dizhi" class="input-with-select" style="margin-left:15px;">
          <el-select v-model="searchvalue" style="width:110px;" @change="handleDistance" slot="append" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-input>
      </div>
    </div>
    <div class="icon_ident">
      <div>
        <img :src="zc" class="ic_ident" />
        <span class="ic_name">正常</span>
      </div>
      <div>
        <img :src="bj" class="ic_ident" />
        <span class="ic_name">报警</span>
      </div>
      <div>
        <img :src="lx" class="ic_ident" />
        <span class="ic_name">离线</span>
      </div>
    </div>
    <!-- <div class="search" v-show="searchBox">
      <img class="back" :src="back" @click="backClick" />
      <el-input placeholder="请输入地址" size="small" id="addresSeach" v-model="dizhi" class="input-with-select" style="margin: 60px 0 0 15px;">
        <el-select v-model="searchvalue" style="width:110px;" @change="handleDistance" slot="append" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-input>
    </div> -->
    <div id="panel" v-if="fireCont">
      <i class="el-icon-close" style="position:absolute;bottom:220px;right:10px;z-index:999;cursor: pointer;" @click="closeSearch" />
      <el-table :data="hydrantTableData" style="width: 100%" height="225">
        <el-table-column prop="" align="center" label="序号" type="index">
        </el-table-column>
        <el-table-column prop="hydrantNo" align="center" width="180" label="编号">
        </el-table-column>
        <el-table-column prop="hydrantName" width="150" align="center" label="名称">
        </el-table-column>
        <el-table-column prop="distance" align="center" label="距离">
        </el-table-column>
        <el-table-column prop="pressure" width="150" align="center" label="压力(MPa)">
        </el-table-column>
        <el-table-column prop="flow" width="150" align="center" label="流量(m³/h)">
        </el-table-column>
        <el-table-column prop="temperature" align="center" label="温度(℃)">
        </el-table-column>
        <el-table-column prop="battery" width="150" align="center" label="电池电压(v)">
        </el-table-column>
        <el-table-column prop="signals" align="center" label="信号强度">
        </el-table-column>
        <el-table-column prop="opening" align="center" label="开关阀">
        </el-table-column>
        <el-table-column prop="angle" align="center" label="倾斜角度">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="togo(scope.row.hydrantName,scope.row.location)">去这里</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="tj_icon" @click="monitoDrawer = true">
      <img :src="tongji" style="width:40px;cursor: pointer;" />
    </div>
    <div class="butbox">
      <div>
        <img @click="fullScreenEvent" :src="quanping" />
      </div>
      <div>
        <el-popover placement="top" title="图层选择" trigger="click" @show="setCheck">
          <img :src="tc_ic" class="tc_ic" />
          <div class="tc_dialog">
            <el-tree ref="elTree" :data="treeData" :props="defaultProps" :show-checkbox="true" node-key="id" @check="aaa" default-expand-all>
            </el-tree>
          </div>
          <img style="display: table-cell;vertical-align: middle;" slot="reference" :src="tuceng" />
        </el-popover>
      </div>
      <div>
        <el-badge :value="alertEventList.length" class="alertCount">
          <img style="display: table-cell;vertical-align: middle;" @click="alarmDrawer = true" :src="baojing" />
        </el-badge>
      </div>
      <div>
        <img slot="reference" @click="dq" :src="dangqian" />
      </div>
    </div>
    <!-- 图层控制 -->
    <!-- <div class="tc_dialog" title="图层选择" v-show="tcVisible">
      <div class="close_icon"><i class="el-icon-close" style="z-index:999;cursor: pointer;" @click="tcVisible = false" /></div>
      <el-tree ref="elTree" :data="treeData" :props="defaultProps" :show-checkbox="true" node-key="id" @check="aaa" default-expand-all>
      </el-tree>
    </div> -->
    <!-- 监测点总览 -->
    <el-drawer title="监测点总览" :visible.sync="monitoDrawer" :direction="direction" :before-close="handleClose" :style="{ height: fullHeight + 'px' }">
      <img :src="zhedie" style="width:20px;cursor: pointer;position:absolute;top:25px;left:15px" @click="monitoDrawer = false" />
      <i class="el-icon-close" style="z-index:999;cursor: pointer;position: absolute;top: 25px;right: 20px;" @click="monitoDrawer = false" />
      <div class="drawerContent">
        <div>
          <div class="title">总览</div>
          <div>
            <div class="line">
              <div class="trem">
                <img class="monitj_icon" src="./images/总数.png" />
                <div class="count">{{tjObl.allHydrantCount}}</div>
                <div class="ident">消防栓总数(个)</div>
              </div>
              <div class="trem">
                <img class="monitj_icon" src="./images/离线.png" style="width:50px;height:50px;" />
                <div class="count">{{tjObl.offLineHydrantCount}}</div>
                <div class="ident">消防栓离线数(个)</div>
              </div>
              <div class="trem">
                <img class="monitj_icon" src="./images/异常.png" />
                <div class="count">{{tjObl.alertHydrantCount}}</div>
                <div class="ident">消防栓异常数(个)</div>
              </div>
            </div>
            <div class="line" style="margin-top:10px;">
              <div class="trem">
                <img class="monitj_icon" src="./images/当前工单.png" />
                <div class="count">7</div>
                <div class="ident" style="margin-left:13px;">当前工单</div>
              </div>
              <div class="trem">
                <img class="monitj_icon" src="./images/巡检任务.png" />
                <div class="count">8</div>
                <div class="ident">报障总数</div>
              </div>
              <div class="trem">
                <img class="monitj_icon" src="./images/保养任务.png" />
                <div class="count">15</div>
                <div class="ident">巡检任务</div>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-top:20px;">
          <div class="title">本月报警趋势分析</div>
          <div style="">
            <AlarmTrend />
          </div>
        </div>
        <div class="xjwb">
          <div class="title">巡检/维保完成情况</div>
          <div class="bot">
            <div style="width:50%;">
              <OnsiteInspece />
            </div>
            <div style="width:50%;" class="botRigCharts">
              <MainTenance />
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 实时报警 -->
    <div class="aaa" v-if="alarmDrawer" style="height:815px;">
      <div class="alarmTitle">
        <img :src="bj_ic" class="bj_ic" />
        <div style="margin-left:5px">实时报警({{ alertEventList.length }}条)</div>
        <i class="el-icon-close" style="position:absolute;right:0px;cursor: pointer;" @click="alarmDrawer = false" />
      </div>
      <div style="margin-top:64px;">
        <div v-for="(item, index) in alertEventList" :key="index" @click="viewDetail(index,item.hydrantName)" :style="index==current?active:''" class="item_box">
          <div class="box">
            <div class="verti_left">
              <div class="hydrantName fontAa">{{ item.hydrantName }}</div>
              <div class="param fontAa">
                <span>{{ item.parameterName }}</span><span style="margin-left:6px;">{{ item.alertValue }}{{ item.unit }}</span>
              </div>
            </div>
            <div class="verti_right">
              <div class="date fontAa">{{ item.startDate }}</div>
              <div class="continue fontAa">
                持续时间<span style="color:red;">{{ item.duration }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div id="dh_panel" v-show="dh_panelVisible"></div>
    <div class="dh_div" v-show="dhVisible" width="25%">
      <div style="text-align:right;">
        <i class="el-icon-close" style="z-index:999;cursor: pointer;" @click="dhClose" />
      </div>
      <div>
        <div style="display:flex;justify-content: space-around;">
          <div :class="index==current?dh_active:dh_noactive" v-for="(item,index) in dh_optionList" :key="index" @click="switchDh(index,item)">{{item}}</div>
        </div>
        <div style="margin-top:20px;">
          <el-input placeholder="请输入起点" v-model="qiDian" size="small" id="tipinput">
            <template slot="prepend">起</template>
          </el-input>
        </div>
        <div style="margin-top:20px;">
          <el-input placeholder="请输入终点" v-model="zhoDian" size="small">
            <template slot="prepend">终</template>
          </el-input>
        </div>
        <div style="margin-top:20px;text-align:right;">
          <el-button size="small" type="primary" @click="naviGation">导航</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import tongji from "@/assets/image/fireCont/展开.svg";
import zhedie from "@/assets/image/fireCont/折叠.svg";
import quanping from "@/assets/image/fireCont/ic_quanping.svg";
import tuceng from "@/assets/image/fireCont/ic_tuceng.svg";
import baojing from "@/assets/image/fireCont/ic_baojing.svg";
import dangqian from "@/assets/image/fireCont/ic_dangqian.svg";
import yuanquan from "@/assets/image/fireCont/area.svg";
import back from "@/assets/image/fireCont/back.svg";
import zc from "@/assets/image/fireCont/消防栓zc.svg";
import bj from "@/assets/image/fireCont/消防栓bj.svg";
import lx from "@/assets/image/fireCont/消防栓lx.svg";
import tc_view from "@/assets/image/fireCont/查看.svg";
import noview from "@/assets/image/fireCont/不查看.svg";
import tc_ic from "@/assets/image/fireCont/tc_ic.svg";
import bj_ic from "@/assets/image/fireCont/bj_ic.svg";
import AlarmTrend from "@/components/schedule/fireCont/alarmTrend.vue";
import OnsiteInspece from "@/components/schedule/fireCont/onsiteInspece.vue";
import MainTenance from "@/components/schedule/fireCont/mainTenance.vue";
//接口
import {
  findFlHydrantList,
  searchFlHydrantList,
  searchFlHydrantLatestData,
  searchflHydrantAlertEvents,
  findAlarmTypeFilter
} from "@/api/schedule/gisHydrant/index"
import {
  getToken
} from "utils/auth";
export default {
  components: {
    tongji,
    zhedie,
    quanping,
    tuceng,
    baojing,
    dangqian,
    AlarmTrend,
    yuanquan,
    back,
    zc,
    bj,
    lx,
    tc_ic,
    bj_ic,
    tc_view,
    noview,
    OnsiteInspece,
    MainTenance
  },
  data () {
    return {
      center: [114.086169, 22.543606],
      zoom: 17,
      treeData: [
        {
          id: 2,
          label: '报警类型',
          children: [
            {
              id: 3,
              parma: "highLimitAlarm",
              label: '水压高报警'
            },
            {
              id: 4,
              icon: 1,
              parma: "lowLimitAlarm",
              label: '水压低报警'
            },
            {
              id: 5,
              icon: 1,
              parma: "toppleAlarm",
              label: '倾倒报警'
            },
            {
              id: 6,
              icon: 1,
              parma: "lowBatteryAlarm",
              label: '电池欠压报警'
            },
            {
              id: 7,
              icon: 1,
              parma: "blankPipeAlarm",
              label: '空管报警'
            },
            {
              id: 8,
              icon: 1,
              parma: "blankPipeAlarm",
              label: '撞击报警'
            },
            {
              id: 9,
              icon: 1,
              parma: "freezeAlarm",
              label: '硬件故障'
            },
            {
              id: 10,
              icon: 1,
              parma: "leakAlarm",
              label: '疑似漏水报警'
            },
            {
              id: 11,
              icon: 1,
              parma: "moveAlarm",
              label: '移位报警'
            },
            {
              id: 13,
              icon: 1,
              parma: "freezeAlarm",
              label: '低水温报警'
            }
          ]
        }
        // {
        //   id: 14,
        //   icon: 1,
        //   label: '在线离线 ',
        //   children: [
        //     {
        //       id: 15,
        //       icon: 1,
        //       label: '在线'
        //     },
        //     {
        //       id: 16,
        //       icon: 1,
        //       label: '离线'
        //     }
        //   ]
        // }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      active: "background:#EBF5FF",
      current: "",
      alarmArea: false,
      alarmMenu: false,
      nameSeach: true,
      nameSeachFlag: false,
      searchStatu: "nameSeach",
      aleft: "",
      atop: "",
      fullHeight: window.innerHeight,
      tongji: tongji,
      zhedie: zhedie,
      quanping: quanping,
      tuceng: tuceng,
      baojing: baojing,
      dangqian: dangqian,
      yuanquan: yuanquan,
      back: back,
      zc: zc,
      bj: bj,
      lx: lx,
      tc_ic: tc_ic,
      bj_ic: bj_ic,
      tc_view: tc_view,
      tcVisible: false,
      dhVisible: false,
      noview: noview,
      monitoDrawer: false,
      alarmVisible: false,
      direction: 'rtl',
      alarmDrawer: false,
      alertEventList: [],
      cpoint: [],
      searchBox: false,
      searchvalue: "1000",
      options: [
        {
          label: "500m",
          value: "500"
        },
        {
          label: "1km",
          value: "1000"
        },
        {
          label: "2km",
          value: "2000"
        }
      ],
      fireCont: false,
      hydrantTableData: [],
      //窗体
      infoWindow: null,
      winInfo: [],
      winTitle: [],
      map: "",
      fireHydrantList: [],
      fireHydrantNameList: [],
      fireHydantName: "",
      tjObl: {},
      items: "",
      map: null,
      vectorLayer: null,
      hydrantData: [],
      distance: 1000,
      dh_optionList: ["驾车", "公交", "步行"],
      dh_active: "dh_active",
      dh_noactive: "dh_noactive",
      current: "",
      naviMode: "驾车",
      dh_panelVisible: false,
      dhFlag: false,
      driving: "",
      transfer: "",
      walking: "",
      qiDian: "",
      dizhi: "",
      qiPosition: "",
      zhoDian: "",
      zhoPosition: "",
      map: "",
      circleCenter: [],
      circle: [],
      enNames: [],
      markers: [],
      limitConnect: 3,
      timeConnect: 0,
      icFlag: true,
      labels: ['水压高报警', '水压低报警', '倾倒报警', '电池欠压报警', '空管报警', '撞击报警', '探头通讯失败', '疑似漏水报警', '移位报警', '开阀报警', '结冰报警', '在线', '离线']
    };
  },
  created () {
  },
  mounted () {
    this.get_bodyHeight()
    this.addEventListener()
    this.handleFlHydrantList()
    this.findFlHydrantState()
    this.searchAlertEvents()
    this.$nextTick(() => {
      this.$refs.elTree.setCheckedNodes(this.treeData);//数据请求成功后，设置默认current
    });
    this.initWebsocket()
    
  },
  watch: {

  },
  methods: {
    querySearch (queryString, cb) {
      if (queryString != "") {
        let callBackArr = []
        console.log(this.fireHydrantNameList)
        this.fireHydrantNameList.map(item => {
          // if (item.includes(queryString) == true) {
          //   let obj = { value: item }
          //   callBackArr.push(obj)
          // }
          if (item.indexOf(queryString) > -1) {
            let obj = { value: item }
            callBackArr.push(obj)
          }
        })
        if (callBackArr.length == 0) {
          cb(["暂无数据"]);
        } else {
          cb(callBackArr);
        }
      }
    },
    handleSelect () {

    },
    setCheck () {
      // this.$nextTick(() => {
      //   debugger;
      //   this.$refs.elTree.setCheckedNodes(this.treeData);
      //   // console.log("222")
      // });
    },
    aaa () {
      let checkNode = this.$refs.elTree.getCheckedNodes()
      let checkYeNode = checkNode.filter(item => !item.children)
      console.log(checkYeNode)
      let labels = []
      checkYeNode.map(item => {
        labels.push(item.label)
      })
      this.labels = labels
      this.map.remove(this.markers)
      let List = this.fireHydrantList
      this.opeRaMarkers(List, labels)
    },
    initWebsocket () {
      let socket = new WebSocket("ws://" + "140.249.214.1:9905" + "/socketServer/" + "addHydrantAlert" + '?token=' + getToken())
      // let socket = new WebSocket("ws://" + "150.139.197.219:80" + "/socketServer/" + "addHydrantAlert" + '?token=' + getToken())
      socket.onopen = () => {
        console.log('实时报警已连接', "111111");
      }
      socket.onmessage = (e) => {
        console.log(e)
        debugger;
        searchFlHydrantList().then(response => {
          let ids = []
          this.fireHydrantList = response.data
          this.fireHydrantList.map(item => {
            ids.push(item.id)
          })
          let obj = {
            ids: ids.toString()
          }
          searchFlHydrantLatestData(obj).then(response => {
            let data = response.data
            let LatestData = this.fireHydrantList.map(item => {
              data.map(i => {
                if (item.id == i.hydrantId) {
                  i.location = item.location
                  item = i
                }
              })
              return item
            })
            this.fireHydrantList = LatestData,
              this.fireHydrantList.map(item => {
                this.fireHydrantNameList.push(item.hydrantName)
              })
            this.opeRaMarkers(this.fireHydrantList, this.labels)
          }).catch(error => {
          });
        }).catch(error => {
        });
        this.searchAlertEvents()
      }
      socket.onclose = () => {
        console.log('服务器已经断开');
        this.reconnect();
      }
    },
    reconnect () {
      let that = this
      if (that.limitConnect > 0) {
        that.limitConnect--;
        that.timeConnect++;
        console.log('第' + that.timeConnect + '次重连');
        setTimeout(function () {
          that.initWebsocket();
        }, 2000)
      } else {
        console.log('TCP连接已超时');
      }
    },
    //获取消防栓统计信息
    findFlHydrantState () {
      findFlHydrantList().then(response => {
        this.tjObl = response.data
        console.log(this.tjObl)
      }).catch(error => {
      });
    },
    //获取实时数据
    searchAlertEvents () {
      let obj = {}
      searchflHydrantAlertEvents(obj).then(response => {
        // this.alertEventList = this.MsgSort(response.data)
        console.log(response.data)
        let EventsList = this.MsgSort(response.data)
        setInterval(() => {
          this.alertEventList = EventsList.map(item => {
            var nowtime = new Date() //获取当前时间
            var startTime = new Date(item.startDate);  //定义结束时间
            var lefttime = nowtime.getTime() - startTime.getTime()  //距离结束时间的毫秒数
            var leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24))  //计算天数
            var lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24)  //计算小时数
            var leftm = Math.floor(lefttime / (1000 * 60) % 60)  //计算分钟数
            var lefts = Math.floor(lefttime / 1000 % 60)  //计算秒数
            item.duration = leftd + "天" + lefth + "时" + leftm + "分" + lefts + "秒";
            return item
          })
        }, 1000);
      }).catch(error => {
      });
    },
    //排序
    MsgSort (obj) {
      obj.sort((a, b) => {
        let t1 = new Date(Date.parse(a.startDate.replace(/-/g, "/")))
        let t2 = new Date(Date.parse(b.startDate.replace(/-/g, "/")))
        return t2.getTime() - t1.getTime()
      })
      return obj
    },
    // 获取所有消防栓
    handleFlHydrantList () {
      searchFlHydrantList().then(response => {
        let ids = []
        this.fireHydrantList = response.data
        this.fireHydrantList = this.fireHydrantList.filter(item => item.isGis != 0)
        this.fireHydrantList.map(item => {
          ids.push(item.id)
        })
        console.log(this.fireHydrantList,'22222222222')
        this.handleLatestData(ids)
      }).catch(error => {
      });
    },
    //点击名字查询
    handleNameClick () {
      this.handleSearchClick(this.fireHydantName)
    },
    //根据名字查询
    handleSearchClick (fireHydantName) {
      let obj = {
        name: fireHydantName
      }
      searchFlHydrantList(obj).then(response => {
        console.log(response)
        let centerlocation = response.data[0].location.split(",")
        let centerLng = parseFloat(centerlocation[0])
        let centerLat = parseFloat(centerlocation[1])
        this.center = [centerLng, centerLat]
        this.zoom = 19.5
        this.init(this.fireHydrantList)
      }).catch(error => {
      });
    },
    viewDetail (index, hydrantName) {
      this.current = index,
        this.handleSearchClick(hydrantName)
    },
    //刷新
    dq () {
      this.center = ""
      this.zoom = 17
      this.fireHydantName = ""
      this.init(this.fireHydrantList)
    },
    //查询上报数据
    handleLatestData (val) {
      let ids = val.toString()
      let obj = {
        ids: ids
      }
      console.log(this.fireHydrantList)
      searchFlHydrantLatestData(obj).then(response => {
        let data = response.data
        let LatestData = this.fireHydrantList.map(item => {
          data.map(i => {
            if (item.id == i.hydrantId) {
              i.location = item.location
              i.installAddress = item.installAddress
              i.hydrantName=item.name
              item = i
            }
          })
          return item
        })
        this.fireHydrantList = LatestData
        console.log(this.fireHydrantList,6666666666666666666)
        this.fireHydrantList.map(item => {
          if (item.hydrantName) {
            this.fireHydrantNameList.push(item.hydrantName)
          }
          else if (item.name) {
            item.hydrantName = item.name
            this.fireHydrantNameList.push(item.name)
          } else {

          }
        })
        this.dq()
      }).catch(error => {
      });
    },
    //进入到附近搜索状态
    toNearStatu () {
      this.nameSeach = false,
        this.searchBox = true
      // this.searchStatu = "nearSearch"
    },
    backClick () {
      this.nameSeach = true,
        this.searchBox = false,
        this.alarmArea = false,
        this.fireCont = false,
        this.dh_panelVisible = false,
        this.dhVisible = false,
        this.dhFlag = false,
        this.searchStatu = "nameSeach",
        this.dizhi = "",
        this.init(this.fireHydrantList)
    },
    closeSearch () {
      this.alarmArea = false,
        this.fireCont = false
    },
    //绑定全屏监听事件
    addEventListener () {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;
      isFullscreen = !!isFullscreen;
      let that = this;
      document.addEventListener("fullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
      document.addEventListener("mozfullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
      document.addEventListener("webkitfullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
      document.addEventListener("msfullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
    },
    //点击全屏事件
    fullScreenEvent () {
      let el = document.documentElement;
      if (this.isFullScren) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (el.requestFullscreen) {
          el.requestFullscreen();
        } else if (el.mozRequestFullScreen) {
          el.mozRequestFullScreen();
        } else if (el.webkitRequestFullScreen) {
          el.webkitRequestFullScreen();
        } else if (el.msRequestFullscreen) {
          el.msRequestFullscreen();
        }
      }
    },
    init (fireHydrantList) {
      console.log(fireHydrantList)
      var that = this
      let marker, map = new AMap.Map('map_box', {
        rotateEnable: true,
        pitchEnable: true,
        zoom: that.zoom,
        pitch: 75,
        rotation: -15,
        viewMode: '3D', //开启3D视图,默认为关闭
        center: that.center,
        terrain: true,
      });
      var styleName = "amap://styles/color";
      map.setMapStyle(styleName);
      that.map = map
      // map.on('moveend', function () {
      //   let level = map.getZoom()
      //   map.remove(that.markers);
      //   fireHydrantList.map(item => {
      //     if (item.alertNames) {
      //       let alertNameList = item.alertNames.split(",")
      //       let flagList = []
      //       alertNameList.map(item => {
      //         if (that.labels.includes(item) == true) {
      //           flagList.push(1)
      //         } else {
      //           flagList.push(0)
      //         }
      //       })
      //       if (flagList.includes(1)) {
      //         if (item.location) {
      //           let ic = ""
      //           let state = ""
      //           let location = item.location.split(",")
      //           if (item.state == 1 || item.state == undefined || item.state == null) {
      //             ic = that.zc
      //             state = '正常'
      //           }
      //           if (item.state == 2) {
      //             ic = that.bj
      //             state = '报警'
      //           }
      //           if (item.state == 3) {
      //             ic = that.lx
      //             state = '离线'
      //           }
      //           if (level >= 17.5) {
      //             var markerContent =
      //               `<div class="card">
      //           <div class="name">${item.hydrantName || item.name}</div>
      //           <div class="card_content">
      //             <div class="card_left">
      //               <div>上报时间</div>
      //               <div>水压</div>
      //               <div>流量</div>
      //               <div>温度</div>
      //               <div>电池电压</div>
      //               <div>阀门状态</div>
      //               <div>倾斜角度</div>
      //               <div>报警信息</div>
      //             </div>
      //             <div class="card_right">
      //               <div>${item.reportDate == undefined ? "" : item.reportDate}</div>
      //               <div style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
      //               <div style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow}</div>
      //               <div style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
      //               <div style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + 'V'}</div>
      //               <div style="${alertNameList.includes('开阀报警') == true ? 'color:red' : 'color:#fff'}">${item.opening == 1 ? "开" : "关"}</div>
      //               <div style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
      //               <div style="word-wrap: break-word">${item.alertNames}</div>
      //             </div>
      //           </div>
      //           <img src="${ic}" style="width:35px;height:35px;"/>
      //          </div>`;
      //             marker = new AMap.Marker({
      //               map: map,
      //               position: [location[0], location[1]],
      //               content: markerContent,
      //               offset: new AMap.Pixel(-13, -30)
      //             });
      //           } else {
      //             marker = new AMap.Marker({
      //               map: map,
      //               position: [location[0], location[1]],
      //               icon: ic,
      //               offset: new AMap.Pixel(-13, -30)
      //             });
      //           }
      //           that.markers.push(marker)
      //         } else {

      //         }
      //       } else {
      //       }
      //     } else {
      //       if (item.location) {
      //         let ic = ""
      //         let state = ""
      //         let location = item.location.split(",")
      //         if (item.state == 1 || item.state == undefined || item.state == null) {
      //           ic = that.zc
      //           state = '正常'
      //         }
      //         if (item.state == 2) {
      //           ic = that.bj
      //           state = '报警'
      //         }
      //         if (item.state == 3) {
      //           ic = that.lx
      //           state = '离线'
      //         }
      //         if (level >= 17.5) {
      //           var markerContent =
      //             `<div class="card">
      //           <div class="name">${item.hydrantName || item.name}</div>
      //           <div class="card_content">
      //             <div class="card_left">
      //               <div>上报时间</div>
      //               <div>水压</div>
      //               <div>流量</div>
      //               <div>温度</div>
      //               <div>电池电压</div>
      //               <div>阀门状态</div>
      //               <div>倾斜角度</div>
      //               <div>报警信息</div>
      //             </div>
      //             <div class="card_right">
      //               <div>${item.reportDate == undefined ? "" : item.reportDate}</div>
      //               <div>${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
      //               <div>${item.flow == undefined ? "\xa0" : item.flow}</div>
      //               <div>${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
      //               <div>${item.battery == undefined ? "\xa0" : item.battery + 'V'}</div>
      //               <div>${item.opening == 1 ? "开" : "关"}</div>
      //               <div>${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
      //               <div></div>
      //             </div>
      //           </div>
      //           <img src="${ic}" style="width:35px;height:35px;"/>
      //          </div>`;
      //           marker = new AMap.Marker({
      //             map: map,
      //             position: [location[0], location[1]],
      //             content: markerContent,
      //             offset: new AMap.Pixel(-13, -30)
      //           });
      //         } else {
      //           marker = new AMap.Marker({
      //             map: map,
      //             position: [location[0], location[1]],
      //             icon: ic,
      //             offset: new AMap.Pixel(-13, -30)
      //           });
      //         }
      //         that.markers.push(marker)
      //       } else {

      //       }
      //     }
      //   })
      // });
      //查询周边
      map.on('click', function (e) {  //点击设置经纬度
        console.log(e.lnglat.getLng(), e.lnglat.getLat())
        if (that.searchStatu == "nearSearch") {
          that.fireCont = true
          if (that.circle) {
            that.map.remove(that.circle)
          }
          that.circleCenter = [e.lnglat.getLng(), e.lnglat.getLat()]
          that.circle = new AMap.Circle({
            center: that.circleCenter,
            radius: that.distance, //半径
            borderWeight: 3,
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            strokeStyle: 'dashed',
            strokeDasharray: [10, 10],
            // 线样式还支持 'dashed'
            fillColor: '#1791fc',
            zIndex: 50,
          })
          that.circle.setMap(that.map)
          map.setFitView(that.circle)
        }
        // 缩放地图到合适的视野级别
        // map.setFitView([circle])

        var content = '<span></span>'
        let m1 = new AMap.Marker({
          map: map,
          draggable: true,
          content: content,
          position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat())
        });
        let hydrantData = fireHydrantList.map(item => {
          if (item.location) {
            let location = item.location.split(",")
            let m2 = new AMap.Marker({
              map: map,
              draggable: true,
              content: content,
              position: new AMap.LngLat(location[0], location[1])
            });
            let p1 = m1.getPosition();
            let p2 = m2.getPosition();
            let distance = Math.round(p1.distance(p2));
            item.distance = distance
            return item
          } else {

          }
        })
        that.hydrantData = hydrantData.filter(item => item != undefined)
        console.log(that.hydrantData)
        that.tableDataFilter(that.distance)
      })
      //关键字tipinput搜索
      let autoOptions = {
        input: "tipinput"
      };
      AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
        var auto = new AMap.AutoComplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
          map: map
        }); //构造地点查询类
        auto.on("select", select); //注册监听，当选中某条记录时会触发
        function select (e) {
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name); //关键字查询查询
          let location = []
          location.push(e.poi.location.lng)
          location.push(e.poi.location.lat)
          that.qiPosition = location
          if (that.dhFlag == true) {
            that.naviGation()
          }
        }
      });
      //关键字addresSeach搜索
      let addresSeachOptions = {
        input: "addresSeach"
      };
      AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
        var addres = new AMap.AutoComplete(addresSeachOptions);
        var addresSearch = new AMap.PlaceSearch({
          map: map
        }); //构造地点查询类
        addres.on("select", select); //注册监听，当选中某条记录时会触发
        function select (e) {
          addresSearch.setCity(e.poi.adcode);
          addresSearch.search(e.poi.name); //关键字查询查询
          that.searchStatu = "nearSearch"
        }
      });
      //
      that.map = map
      //3D罗盘
      let controlBar = new AMap.ControlBar({
        position: {
          right: '7px',
          bottom: '130px'
        }
      });
      controlBar.addTo(map);
      //缩放
      let toolBar = new AMap.ToolBar({
        position: {
          right: '37px',
          bottom: '50px'
        }
      });
      toolBar.addTo(map);
      let level = map.getZoom()
      console.log(fireHydrantList)
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(6, -30) })
      console.log(that.fireHydrantList)
      fireHydrantList.map(item => {
        // debugger;
        if (item.location) {
          let ic = ""
          let unit = ""
          let state = item.state
          let location = item.location.split(",")
          let alertNameList
          if (item.alertNames) {
            alertNameList = item.alertNames.split(",")
          } else {
            alertNameList = []
          }
          if (state == 1 || state == undefined || state == null) {
            ic = that.zc
            state = '正常'
          }
          if (state == 2) {
            ic = that.bj
            state = '报警'
          }
          if (state == 3) {
            ic = that.lx
            state = '离线'
          }
          if (item.metaProductCode == "000002") {
            unit = "%"
          } else {
            unit = "V"
          }
          // var markerContent =
          //   `<div class="card">
          //     <div class="name">${item.hydrantName || item.name}</div>
          //     <div class="card_content">
          //       <div class="card_left">
          //         <div>上报时间</div>
          //         <div>水压</div>
          //         <div>流量</div>
          //         <div>温度</div>
          //         <div>电池电压</div>
          //         <div>阀门状态</div>
          //         <div>倾斜角度</div>
          //         <div>报警信息</div>
          //       </div>
          //       <div class="card_right">
          //         <div>${item.reportDate == undefined ? "" : item.reportDate}</div>
          //         <div style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
          //         <div style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow}</div>
          //         <div style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
          //         <div style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + 'V'}</div>
          //         <div style="${alertNameList.includes('开阀报警') == true ? 'color:red' : 'color:#fff'}">${item.opening == 1 ? "开" : "关"}</div>
          //         <div style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
          //         <div style="word-wrap: break-word">${item.alertNames}</div>
          //       </div>
          //     </div>
          //     <img src="${ic}" style="width:35px;height:35px;"/>
          //    </div>`;
          // marker = new AMap.Marker({
          //   map: map,
          //   position: [location[0], location[1]],
          //   content: markerContent,
          //   offset: new AMap.Pixel(-13, -30)
          // });
          // debugger;
          marker = new AMap.Marker({
            map: map,
            position: [location[0], location[1]],
            icon: ic,
            offset: new AMap.Pixel(-13, -30)
          });
          that.markers.push(marker)
          marker.content =
            `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
          marker.on('click', function (e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
          });
        } else {

        }
      })
    },
    //弹出导航框
    togo (hydrantName, location) {
      console.log(hydrantName, location, this.map)
      this.dhVisible = true
      this.zhoDian = hydrantName
      this.zhoPosition = location.split(",")
    },
    //导航并规划路线
    naviGation () {
      let qiPosition = this.qiPosition
      let zhoPosition = this.zhoPosition
      let zhoLng = parseFloat(zhoPosition[0])
      let zhoLat = parseFloat(zhoPosition[1])
      this.dhFlag = true
      // 根据起终点经纬度规划驾车导航路线
      //构造路线导航类
      if (this.driving) {
        this.driving.clear()
      }
      if (this.transfer) {
        this.transfer.clear()
      }
      if (this.walking) {
        this.walking.clear()
      }
      if (this.naviMode == "驾车") {
        this.driving = new AMap.Driving({
          map: this.map,
          panel: "dh_panel"
        });
        this.driving.search(new AMap.LngLat(qiPosition[0], qiPosition[1]), new AMap.LngLat(zhoLng, zhoLat), function (status, result) {
        });
        this.dh_panelVisible = true
      }
      if (this.naviMode == "公交") {
        var transferOption = {
          map: this.map,
          nightflag: true, // 是否计算夜班车
          city: '深圳市',
          panel: 'dh_panel'
        }
        this.transfer = new AMap.Transfer(transferOption)
        //根据起、终点坐标查询公交换乘路线
        this.transfer.search(new AMap.LngLat(qiPosition[0], qiPosition[1]), new AMap.LngLat(zhoLng, zhoLat), function (status, result) {
        });
        this.dh_panelVisible = true
      }
      if (this.naviMode == "步行") {
        //步行导航
        this.walking = new AMap.Walking({
          map: this.map,
          panel: "dh_panel"
        });
        //根据起终点坐标规划步行路线
        this.walking.search([qiPosition[0], qiPosition[1]], [zhoLng, zhoLat], function (status, result) {
        });
        this.dh_panelVisible = true
      }
    },
    //切换导航
    switchDh (index, item) {
      this.current = index,
        this.naviMode = item
      if (this.qiPosition != "" && this.dhFlag == true) {
        this.naviGation()
      }
    },
    //关闭导航
    dhClose () {
      this.dh_panelVisible = false,
        this.dhVisible = false,
        this.dhFlag = false
      if (this.driving) {
        this.driving.clear()
      }
      if (this.transfer) {
        this.transfer.clear()
      }
      if (this.walking) {
        this.walking.clear()
      }
    },
    handleDistance (v) {
      this.distance = parseInt(v)
      this.tableDataFilter(parseInt(v))
      if (this.circle) {
        this.map.remove(this.circle)
      }
      this.circle = new AMap.Circle({
        center: this.circleCenter,
        radius: this.distance, //半径
        borderWeight: 3,
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeStyle: 'dashed',
        strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: '#1791fc',
        zIndex: 50,
      })
      this.circle.setMap(this.map)
      this.map.setFitView(this.circle)
    },
    handleCircle () {
      var that = this
      if (that.searchStatu == "nearSearch") {
        that.fireCont = true
        if (that.circle) {
          that.map.remove(that.circle)
        }
        that.circle = new AMap.Circle({
          center: that.circleCenter,
          radius: that.distance, //半径
          borderWeight: 3,
          strokeColor: "#FF33FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          strokeStyle: 'dashed',
          strokeDasharray: [10, 10],
          // 线样式还支持 'dashed'
          fillColor: '#1791fc',
          zIndex: 50,
        })
        that.circle.setMap(that.map)
        that.map.setFitView(that.circle)
      }
      // 缩放地图到合适的视野级别
      // map.setFitView([circle])
      console.log(that.circleCenter)
      var content = '<span></span>'
      let m1 = new AMap.Marker({
        map: that.map,
        draggable: true,
        content: content,
        position: new AMap.LngLat(that.circleCenter[0], that.circleCenter[1])
      });
      let hydrantData = that.fireHydrantList.map(item => {
        if (item.location) {
          let location = item.location.split(",")
          let m2 = new AMap.Marker({
            map: this.map,
            draggable: true,
            content: content,
            position: new AMap.LngLat(location[0], location[1])
          });
          let p1 = m1.getPosition();
          let p2 = m2.getPosition();
          let distance = Math.round(p1.distance(p2));
          item.distance = distance
          return item
        } else {

        }
      })
      that.hydrantData = hydrantData.filter(item => item != undefined)
      console.log(that.hydrantData)
      that.tableDataFilter(that.distance)
    },
    //表格数据过滤
    tableDataFilter (value) {
      this.hydrantTableData = this.hydrantData.filter(item => item.distance <= value)
      this.hydrantTableData.sort(function (a, b) {
        return a.distance < b.distance ? -1 : 1
      });
      this.hydrantTableData.map(item => {
        if (item.opening == 1) {
          item.opening = '开'
        } else if (item.opening == 0) {
          item.opening = '关'
        }
        else {
          item.opening = ''
        }
      })
      console.log(this.hydrantTableData)
    },
    get_bodyHeight () {
      //动态获取浏览器高度
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },
    //操控markers
    opeRaMarkers (List, labels) {
      console.log(List)
      var that = this
      var map = that.map
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(6, -30) })
      List.map(item => {
        let unit = ""
        if (item.metaProductCode == "000002") {
          unit = "%"
        } else {
          unit = "V"
        }
        if (item.alertNames) {
          let alertNameList = item.alertNames.split(",")
          let flagList = []
          if (labels.includes("在线") == true && labels.includes("离线") == false) {
            alertNameList.map(item => {
              if (labels.includes(item) == true) {
                flagList.push(1)
              } else {
                flagList.push(0)
              }
            })
            if (flagList.includes(1)) {
              if (item.location) {
                let ic = ""
                let state = ""
                let location = item.location.split(",")
                if (item.state == 1 || item.state == undefined || item.state == null) {
                  ic = that.zc
                  state = '正常'
                  var marker = new AMap.Marker({
                    map: map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  });
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 2) {
                  ic = that.bj
                  state = '报警'
                  var marker = new AMap.Marker({
                    map: map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  });
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 3) {
                  ic = that.lx
                  state = '离线'
                  var marker = new AMap.Marker({
                    map: map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  });
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
              } else {
              }
            } else {
              if (item.location) {
                let ic = ""
                let state = ""
                let location = item.location.split(",")
                if (item.state == 1 || item.state == undefined || item.state == null) {
                  ic = that.zc
                  state = '正常'
                  var marker = new AMap.Marker({
                    map: map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  });
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 2) {
                  ic = that.bj
                  state = '报警'
                  var marker = new AMap.Marker({
                    map: map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  });
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 3) {
                  ic = that.lx
                  state = '离线'
                }
              } else {
              }
            }
          } else if (labels.includes("离线") == true && labels.includes("在线") == false) {
            alertNameList.map(item => {
              if (labels.includes(item) == true) {
                flagList.push(1)
              } else {
                flagList.push(0)
              }
            })
            if (flagList.includes(1)) {
              if (item.location) {
                let ic = ""
                let state = ""
                let location = item.location.split(",")
                if (item.state == 1 || item.state == undefined || item.state == null) {
                  ic = that.zc
                  state = '正常'
                  var marker = new AMap.Marker({
                    map: that.map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  })
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 2) {
                  ic = that.bj
                  state = '报警'
                  var marker = new AMap.Marker({
                    map: that.map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  })
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 3) {
                  ic = that.lx
                  state = '离线'
                  var marker = new AMap.Marker({
                    map: that.map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  })
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
              } else {
              }
            } else {
              if (item.location) {
                let ic = ""
                let state = ""
                let location = item.location.split(",")
                if (item.state == 1 || item.state == undefined || item.state == null) {
                  ic = that.zc
                  state = '正常'
                }
                if (item.state == 2) {
                  ic = that.bj
                  state = '报警'
                }
                if (item.state == 3) {
                  ic = that.lx
                  state = '离线'
                  var marker = new AMap.Marker({
                    map: that.map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  })
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
              } else {
              }
            }
          } else if (labels.includes("离线") == true && labels.includes("在线") == true) {
            if (item.location) {
              let ic = ""
              let state = ""
              let location = item.location.split(",")
              if (item.state == 1 || item.state == undefined || item.state == null) {
                ic = that.zc
                state = '正常'
              }
              if (item.state == 2) {
                ic = that.bj
                state = '报警'
              }
              if (item.state == 3) {
                ic = that.lx
                state = '离线'
              }
              var marker = new AMap.Marker({
                map: that.map,
                position: [location[0], location[1]],
                icon: ic,
                offset: new AMap.Pixel(-13, -30)
              });
              that.markers.push(marker)
              marker.content =
                `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
              marker.on('click', function (e) {
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
              });
            } else {
            }
          } else {
            alertNameList.map(item => {
              if (labels.includes(item) == true) {
                flagList.push(1)
              } else {
                flagList.push(0)
              }
            })
            if (flagList.includes(1)) {
              if (item.location) {
                let ic = ""
                let state = ""
                let location = item.location.split(",")
                if (item.state == 1 || item.state == undefined || item.state == null) {
                  ic = that.zc
                  state = '正常'
                }
                if (item.state == 2) {
                  ic = that.bj
                  state = '报警'
                }
                if (item.state == 3) {
                  ic = that.lx
                  state = '离线'
                }
                var marker = new AMap.Marker({
                  map: that.map,
                  position: [location[0], location[1]],
                  icon: ic,
                  offset: new AMap.Pixel(-13, -30)
                });
                that.markers.push(marker)
                marker.content =
                  `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                marker.on('click', function (e) {
                  infoWindow.setContent(e.target.content);
                  infoWindow.open(map, e.target.getPosition());
                });
              } else {
              }
            } else {
            }
          }
        } else {
          let alertNameList = []
          let flagList = []
          if (item.location) {
            let ic = ""
            let state = ""
            let location = item.location.split(",")
            if (item.state == 1 || item.state == undefined || item.state == null) {
              ic = that.zc
              state = '正常'
            }
            if (item.state == 2) {
              ic = that.bj
              state = '报警'
            }
            if (item.state == 3) {
              ic = that.lx
              state = '离线'
            }
            var marker = new AMap.Marker({
              map: that.map,
              position: [location[0], location[1]],
              icon: ic,
              offset: new AMap.Pixel(-13, -30)
            });
            that.markers.push(marker)
            marker.content =
              `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
            marker.on('click', function (e) {
              infoWindow.setContent(e.target.content);
              infoWindow.open(map, e.target.getPosition());
            });
          } else {
          }
        }
      })
      // that.map.on('moveend', function () {
      //   let level = that.map.getZoom()
      //   that.map.remove(that.markers);
      //   List.map(item => {
      //     if (item.alertNames) {
      //       let alertNameList = item.alertNames.split(",")
      //       let flagList = []
      //       alertNameList.map(item => {
      //         if (labels.includes(item) == true) {
      //           flagList.push(1)
      //         } else {
      //           flagList.push(0)
      //         }
      //       })
      //       if (flagList.includes(1)) {
      //         if (item.location) {
      //           let ic = ""
      //           let state = ""
      //           let location = item.location.split(",")
      //           if (item.state == 1 || item.state == undefined || item.state == null) {
      //             ic = that.zc
      //             state = '正常'
      //           }
      //           if (item.state == 2) {
      //             ic = that.bj
      //             state = '报警'
      //           }
      //           if (item.state == 3) {
      //             ic = that.lx
      //             state = '离线'
      //           }
      //           if (level >= 17.5) {
      //             var markerContent =
      //               `<div class="card">
      //           <div class="name">${item.hydrantName || item.name}</div>
      //           <div class="card_content">
      //             <div class="card_left">
      //               <div>上报时间</div>
      //               <div>水压</div>
      //               <div>流量</div>
      //               <div>温度</div>
      //               <div>电池电压</div>
      //               <div>阀门状态</div>
      //               <div>倾斜角度</div>
      //               <div>报警信息</div>
      //             </div>
      //             <div class="card_right">
      //               <div>${item.reportDate == undefined ? "" : item.reportDate}</div>
      //               <div style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
      //               <div style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow}</div>
      //               <div style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
      //               <div style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + 'V'}</div>
      //               <div style="${alertNameList.includes('开阀报警') == true ? 'color:red' : 'color:#fff'}">${item.opening == 1 ? "开" : "关"}</div>
      //               <div style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
      //               <div style="word-wrap: break-word">${item.alertNames}</div>
      //             </div>
      //           </div>
      //           <img src="${ic}" style="width:35px;height:35px;"/>
      //          </div>`;
      //             var marker = new AMap.Marker({
      //               map: that.map,
      //               position: [location[0], location[1]],
      //               content: markerContent,
      //               offset: new AMap.Pixel(-13, -30)
      //             });
      //           } else {
      //             var marker = new AMap.Marker({
      //               map: that.map,
      //               position: [location[0], location[1]],
      //               icon: ic,
      //               offset: new AMap.Pixel(-13, -30)
      //             });
      //           }
      //           that.markers.push(marker)
      //         } else {

      //         }
      //       } else {
      //       }
      //     } else {
      //       if (item.location) {
      //         let ic = ""
      //         let state = ""
      //         let location = item.location.split(",")
      //         if (item.state == 1 || item.state == undefined || item.state == null) {
      //           ic = that.zc
      //           state = '正常'
      //         }
      //         if (item.state == 2) {
      //           ic = that.bj
      //           state = '报警'
      //         }
      //         if (item.state == 3) {
      //           ic = that.lx
      //           state = '离线'
      //         }
      //         if (level >= 17.5) {
      //           var markerContent =
      //             `<div class="card">
      //           <div class="name">${item.hydrantName || item.name}</div>
      //           <div class="card_content">
      //             <div class="card_left">
      //               <div>上报时间</div>
      //               <div>水压</div>
      //               <div>流量</div>
      //               <div>温度</div>
      //               <div>电池电压</div>
      //               <div>阀门状态</div>
      //               <div>倾斜角度</div>
      //               <div>报警信息</div>
      //             </div>
      //             <div class="card_right">
      //               <div>${item.reportDate == undefined ? "" : item.reportDate}</div>
      //               <div>${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
      //               <div>${item.flow == undefined ? "\xa0" : item.flow}</div>
      //               <div>${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
      //               <div>${item.battery == undefined ? "\xa0" : item.battery + 'V'}</div>
      //               <div>${item.opening == 1 ? "开" : "关"}</div>
      //               <div>${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
      //               <div></div>
      //             </div>
      //           </div>
      //           <img src="${ic}" style="width:35px;height:35px;"/>
      //          </div>`;
      //           var marker = new AMap.Marker({
      //             map: that.map,
      //             position: [location[0], location[1]],
      //             content: markerContent,
      //             offset: new AMap.Pixel(-13, -30)
      //           });
      //         } else {
      //           var marker = new AMap.Marker({
      //             map: that.map,
      //             position: [location[0], location[1]],
      //             icon: ic,
      //             offset: new AMap.Pixel(-13, -30)
      //           });
      //         }
      //         that.markers.push(marker)
      //       } else {

      //       }
      //     }
      //   })
      // });
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  }
};
</script>
<style lang="scss" >
.map {
  position: relative;
  .search {
  position: absolute;
  top: 25px;
  left: 60px;
}
.search_item {
  display: flex;
  box-shadow: 0px 12px 12px 0px rgba(0, 0, 0, 0.1);
}
.near_item {
  display: flex;
   
}
.near_item .input-with-select{
    box-shadow:0px 12px 12px 0px rgba(0, 0, 0, 0.1);
  }
.el-input__prefix,
.el-input__suffix {
  display: flex;
  align-items: center;
  margin-right: 5px;
  cursor: pointer;
}
.icon_ident {
  width: 200px;
  height: 39px;
  padding: 7px;
  display: flex;
  justify-content: space-around;
  position: absolute;
  right: 150px;
  top: 24px;
  background: #fff;
box-shadow:0px 12px 12px 0px rgba(0, 0, 0, 0.1);
}
.ic_ident {
  height: 25px;
}
.ic_name {
  font-size: 12px;
  position: relative;
  bottom: 6px;
  margin-left: 1px;
}
.back {
  width: 45px;
  height: 30px;
  cursor: pointer;
}
.contextmenu {
  background: #fff;
  position: fixed;
  z-index: 999;
}
.alarmArea {
  position: fixed;
  z-index: 999;
}
.contextmenu p {
  cursor: pointer;
  padding: 1px 25px 0;
}

.contextmenu p:hover {
  background: #ccc;
}
#panel {
  position: absolute;
  background-color: white;
  overflow-y: auto;
  bottom: 0px;
  width: 100%;
  height: 225px;
  border-bottom: solid 1px silver;
  z-index: 999;
}
.tj_icon {
  position: absolute;
  right: 36px;
  top: 25px;
  
}
#map_box {
  margin: 0;
  padding: 0;
  width: 100%;
}
.butbox {
  background: #fff;
  margin-left: 40%;
  width: 20%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 50px;
  box-shadow: 0px 12px 12px 0px rgba(0, 0, 0, 0.1);
}
.butbox div {
  cursor: pointer;
}
.butbox > div > img {
  display: table-cell;
  vertical-align: middle;
}
.tc_dialog {
  width: 180px;
}
.el-drawer__header > :first-child {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #414141;
}
.el-drawer__open .el-drawer.rtl {
  overflow-y: auto;
  overflow-x: hidden;
}
.title {
  margin-left: 25px;
  height: 24px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
}
.line {
  display: flex;
  justify-content: space-around;
}
.monitj_icon {
  margin: 12px 0 0 0;
}
.trem {
  width: 110px;
  text-align: center;
}
.count {
  height: 36px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 42px;
  text-align: center;
}
.ident {
  height: 19px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #a4a5a6;
  line-height: 22px;
}
.alarmTitle {
  display: flex;
  padding-top: 19px;
  border-bottom: 1px solid #e4e4e4;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  padding-bottom: 20px;
  position: fixed;
  width: 285px;
  z-index: 999;
  background: #fff;
}
.box {
  position: relative;
  height: 65px;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  justify-content: space-between;
}
.verti_left {
}
.hydrantName {
  font-weight: 700;
}
.param {
  color: #ca0303;
}
.continue {
}
.fontAa {
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 22px;
  /* margin-top: 6px; */
}
.drawerContent {
  overflow: auto;
}
.amap-icon img {
  width: 35px;
}
.tc_icon {
  width: 20px;
  height: 16px;
  position: relative;
  top: 2px;
}
span {
  font-size: 11px;
}
.info-middle img {
  float: left;
  margin-right: 6px;
}
.bot {
  display: flex;
  justify-content: space-between;
}
.card {
  width: 300px;
  height: 250px;
  padding: 10px 20px;
  position: relative;
  bottom: 20px;
}
.name {
  font-size: 16px;
  background: #fff;
  color: #0b9ac3;
  font-weight: 700;
  padding: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.card_content {
  background: #fff;
  font-size: 14px;
  color: #000000;
  padding: 0 10px 10px 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.card_line {
  display: flex;
  justify-content: space-between;
}
.dh_div {
  position: absolute;
  right: 20px;
  bottom: 270px;
  background: #fff;
  border-radius: 5px;
  border: #ccc 1px solid;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#dh_panel {
  position: absolute;
    background-color: white;
    height: 500px;
    overflow-y: auto;
    bottom: 260px;
    left: 20px;
    width: 280px;
}
.dh_noactive {
  background: #f5f7fa;
  color: black;
  width: 60px;
  height: 30px;
  border-radius: 2px;
  font-size: 14px;
  text-align: center;
  padding-top: 5px;
}
.dh_active {
  background: #3d93fd;
  color: #fff;
  width: 60px;
  height: 30px;
  border-radius: 2px;
  font-size: 14px;
  text-align: center;
  padding-top: 5px;
}
.alertCount {
}
.el-drawer__open .el-drawer.rtl {
  width: 420px !important;
  margin-top: 71px;
}
.aaa {
  width: 330px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 2px;
  overflow-y: auto;
  z-index: 999;
  border-top: 1px solid #ccc;
  padding: 0 18px;
}
.card_left {
  width: 120px;
}
.card_right {
  width: 180px;
}
.close_icon {
  background: #fff;
  text-align: right;
  padding: 5px 10px 0 0;
}
.el-popover__title {
  padding-left: 25px;
}
.tc_ic {
  width: 20px;
  position: absolute;
  top: 10px;
  left: 7px;
}
.bj_ic {
  width: 20px;
}
.tc_close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.item_box {
  padding: 0 5px 0 5px;
}
}

@media screen and (max-height: 900px) {
  .xjwb {
    height: 330px;
  }
}
</style>
